<template>
	<up-card :title="post.username" :thumb="post.avatarUrl" thumb-size="60" thumb-radius="30" :thumb-border="true"
		:foot-border-top="false" :head-border-bottom='false'>
		<template #body>
			<!-- 描述部分 -->
			<view class="post-content" @click="doPostInfo(post.id)">
				{{ post.content }}
			</view>
		</template>
		<template #foot>
			<view class="button-container">
				<up-button iconColor="#909399" @click="preAddComment(post.id)" icon='chat-fill'
					class="action-button">评论</up-button>
				<up-button :iconColor="post.thumb ? '#ee0a24' : '#909399'" @click="doThumb(post.id)"
					icon='thumb-up-fill' class="action-button">{{post.thumbNum}}</up-button>
				<up-button v-if="post.userId === currentUser?.id" iconColor="#ee0a24" @click="doDeletePost(post.id)"
					class="action-button">删除</up-button>
			</view>
		</template>
	</up-card>

	<!-- 评论列表 -->
	<view v-for="comment in post.postCommentList" :key="comment.id" class="comment-item">
		<up-cell :title="comment.username" :icon="comment.avatarUrl" :label="comment.content" :is-link="false" />
	</view>

	<!-- 分割线 -->
	<up-divider lineColor="#1989fa" class="divider" />

	<!-- 空状态组件 -->
	<up-empty v-if="!post || post.length < 1" description="无符合的帖子" />

	<up-popup :show="show" mode="bottom" @close="doAddCommentCancel">
		<up-form @submit.prevent="doAddComment">
			<up-form-item borderBottom labelWidth='120rpx' style="padding-left: 30rpx;">
				<up-textarea v-model="comment" placeholder="请输入评论" count :maxlength='200'></up-textarea>
			</up-form-item>

			<view style="margin: 16px;">
				<up-button type="primary" @click="doAddComment">
					发送
				</up-button>
			</view>
		</up-form>
	</up-popup>

</template>

<script setup lang="ts">
	import { ref, watchEffect } from "vue";
	import myAxios from "@/plugins/myAxios"; // 假设你已经封装了 Axios
	import { getCurrentUser } from "@/services/user";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const currentUser = ref('');
	const comment = ref('');
	const post = ref<any>({});
	const postId = ref<string | undefined>();
	const show = ref(false);
	const addCommentPost = ref(0);

	/**
	 * 页面加载时触发，获取路由参数
	 */
	onLoad(async (options) => {
		console.log("Route parameters:", options);
		postId.value = options.id; // 获取路由参数 id
		await getPost(); // 加载帖子数据
		currentUser.value = await getCurrentUser(); // 获取当前用户信息
	});

	/**
	 * 删除帖子
	 */
	const doDeletePost = async (id : number) => {
		try {
			const res = await myAxios.post("/post/delete", {
				id: id,
			});
			if (res?.data?.code === 0) {
				uni.showToast({ title: "删除成功", icon: "success" });
			} else {
				uni.showToast({
					title: '删除失败' + (res.data.description ? `,${res.data.description}` : ''),
					icon: "none",
				});
			}
		} catch (error) {
			uni.showToast({ title: '请求失败', icon: "none" });
		}
	};

	/**
	 * 获取帖子详情
	 */
	const getPost = async () => {
		try {
			const res = await myAxios.get("/post/get", {
				id: postId.value
			});
			if (res.data) {
				post.value = res.data;
				console.log("Post data:", post.value);
			} else {
				uni.showToast({ title: "加载帖子失败", icon: "none" });
			}
		} catch (error) {
			uni.showToast({ title: "加载帖子失败", icon: "none" });
		}
	};

	/**
	 * 预处理添加评论
	 */
	const preAddComment = (postId : number) => {
		show.value = true;
		addCommentPost.value = postId;
	};

	/**
	 * 添加评论
	 */
	const doAddComment = async () => {
		try {
			const res = await myAxios.post("/post/addComment", {
				content: comment.value,
				postId: addCommentPost.value,
			});
			if (res?.data?.code === 0) {
				doAddCommentCancel();
			} else {
				uni.showToast({
					title: '评论失败' + (res.data.description ? `,${res.data.description}` : ''),
					icon: "none",
				});
			}
		} catch (error) {
			uni.showToast({ title: "评论失败", icon: "none" });
		}
	};

	/**
	 * 关闭评论框
	 */
	const doAddCommentCancel = () => {
		comment.value = '';
		show.value = false;
	};

	/**
	 * 点赞
	 */
	const doThumb = async (postId : number) => {
		console.log("12123")
		try {
			const res = await myAxios.post("/post_thumb/", {
				postId: postId,
			});
			if (res?.data?.code === 0) {
				if (res.data.data === 1) {
					post.value.thumbNum += 1;
				} else {
					post.value.thumbNum -= 1;
				}
				post.value.thumb = !post.value.thumb;
			} else {
				uni.showToast({
					title: '点赞失败' + (res.data.description ? `,${res.data.description}` : ''),
					icon: "none",
				});
			}
		} catch (error) {
			uni.showToast({ title: "点赞失败", icon: "none" });
		}
	};

	// 监听评论的帖子 ID
	watchEffect(() => {
		addCommentPost.value;
	});
</script>


<style lang='scss' scoped>
	.button-container {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}

	.action-button {
		margin-left: 10rpx; /* 按钮之间的间距 */
	}

	.comment-item {
		margin: 8px 0; /* 评论之间的间距 */
	}

	.divider {
		margin: 16px 0; /* 分割线的上下间距 */
	}
</style>